<template>
  <div class="main-con">
    <!-- filter -->
    <div class="filter-con">
      <div class="form">
        <el-form inline ref="forms" :model="forms" label-width="80px">
          <el-form-item label="企业" label-width="100px">
            <el-input v-model="forms.name" style="width: 160px"></el-input>
          </el-form-item>
          <el-form-item label="税号" label-width="100px">
            <el-input v-model="forms.num" style="width: 160px"></el-input>
          </el-form-item>
          <el-form-item label="周期" label-width="100px">
            <el-input v-model="forms.day" style="width: 160px"></el-input>
          </el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form>
      </div>
    </div>

    <!-- el-tab -->
    <!-- <div class="tablecon">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 90%; margin: auto;"
      >
        <el-table-column label="企业名称/税号" prop="date"> </el-table-column>
        <el-table-column label="经营范围" prop="name"> </el-table-column>
        <el-table-column label="数据周期" prop="mouth"> </el-table-column>
        <el-table-column label="上班时间" prop="time"> </el-table-column>
        <el-table-column label="处理状态" prop="status"> </el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div> -->
    <!-- table 标签 -->
    <div class="table-con">
      <table>
        <tr class="trr">
          <th style="width: 300px">企业名称/税号</th>
          <th>经营范围/期限</th>
          <th>数据周期</th>
          <th>上报时间</th>
          <th>处理状态</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, i) in tableData" :key="i">
          <td class="border-bottom">
            <div class="box-con">
              <img :src="item.img" alt="" />
              <div class="right">
                {{ item.qiye }}
                <br />
                {{ item.date }}
              </div>
            </div>
          </td>
          <td class="border-bottom">{{ item.name }}</td>
          <td class="border-bottom">{{ item.mouth }}</td>
          <td class="border-bottom">{{ item.time }}</td>
          <td
            class="border-bottom status"
            :class="item.status == '已解决' ? 'green' : 'red'"
          >
            {{ item.status }}
          </td>
          <td class="border-bottom">
            <el-button class="btns" @click="dialogFormVisible = true">
              编辑
            </el-button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 企业账号管理  添加 /  编辑 -->
    <el-dialog title="添加账号企业" :visible.sync="dialogFormVisible">
      <div class="dialog-form">
        <div class="left">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="企业名称" class="dialog-con">
              <el-input
                v-model="form.name"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="编号" class="dialog-con">
              <el-input
                v-model="form.num"
                autocomplete="off"
                placeholder="请输入编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" class="dialog-con">
              <el-select
                v-model="form.status"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option label="正常" value="zc"></el-option>
                <el-option label="异常" value="err"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            class="dialog-con"
          >
            <el-form-item label="税号">
              <el-input
                v-model="form.region"
                autocomplete="off"
                placeholder="请输入企业税号"
              ></el-input>
            </el-form-item>
            <el-form-item label="经营期限">
              <el-input
                v-model="form.month"
                autocomplete="off"
                placeholder="请输入经营期限"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select
                v-model="form.zh"
                placeholder="请选择账户类型"
                style="width: 100%"
              >
                <el-option label="企业账号" value="com"></el-option>
                <el-option label="个人账号" value="user"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="footform">
        <el-form ref="form" :model="form" label-width="80px" class="dialog-con">
          <el-form-item label="经营范围">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入经营范围"
              v-model="form.fw"
              width="100%"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
          class="button"
          >确 认</el-button
        >
        <el-button @click="dialogFormVisible = false" class="button"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!--  -->
    <el-button class="btns" @click="log = true"> 编辑 </el-button>
    <el-dialog title="企业信息" :visible.sync="log" width="100%">
      <el-steps :active="active" :space="800" align-center>
        <el-step title="基础信息/店铺"> </el-step>
        <el-step title="商品信息"> </el-step>
      </el-steps>
      <div v-show="active == 1">
        <div class="shopinfo">
          <div class="shopinfo-left">
            <el-form ref="shopform" :model="shopform" label-width="80px">
              <el-form-item label="企业名称">
                <el-input v-model="shopform.name"></el-input>
              </el-form-item>
              <el-form-item label="税号">
                <el-input v-model="shopform.num"></el-input>
              </el-form-item>
              <el-form-item label="经营时间">
                <el-input v-model="shopform.time"></el-input>
              </el-form-item>
              <el-form-item label="经营范围">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="shopform.fw"
                ></el-input>
              </el-form-item>
              <el-form-item label="数据周期">
                <el-input v-model="shopform.zq"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="shopinfo-con">
            <!-- <el-col :span="24">
    <el-form-item label="与承租户同户籍成员:" >
        <el-table :data="zichandetail" :border=true style="width: 99.99%;">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="150">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.name" autocomplete="off" size="small"
                    placeholder="请输入姓名"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="与承租人关系" width="150">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.relationship" autocomplete="off" size="small" placeholder="请输入与承租人关系"></el-input>
                </template>
             </el-table-column>
             <el-table-column prop="name" label="联系电话" width="150">
                 <template slot-scope="scope">
                     <el-input v-model="scope.row.mobile" autocomplete="off" size="small"placeholder="请输入联系电话"></el-input>
                 </template>
             </el-table-column>
             <el-table-column prop="name" label="出生年月" width="150">
                 <template slot-scope="scope">
                     <el-date-picker v-model="scope.row.birthday" type="month" placeholder="请输入出生年月" value-format="yyyy-MM" size="small" class="allwidth">
                     </el-date-picker>
                  </template>
              </el-table-column>
              <el-table-column prop="name" label="工作单位">
                  <template slot-scope="scope">
                      <el-input v-model="scope.row.gongzuodanwei" autocomplete="off" size="small" placeholder="请输入工作单位"></el-input>
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                      <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">删除</el-button>
                  </template>
              </el-table-column>
         </el-table>
         <i class="el-icon-circle-plus-outline" @click="addmembers"></i>
      </el-form-item>
   </el-col>
</el-row> -->

            <!-- <div class="app-container">
              <el-table
                :data="tableDatas"
                border
                style="width: 600px; margin-top: 20px"
              >
                <el-table-column
                  v-for="item in columnData"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row[item.prop] !== null">
                      <el-input v-model="scope.row[item.prop]"></el-input>
                    </span>
                    <span
                      style="color: red; cursor: pointer"
                      v-else
                      @click="deleteColumns(item.prop)"
                      >删除列</span
                    >
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      @click="deleteRows(scope)"
                      v-if="scope.$index < tableData.length - 1"
                      type="text"
                      size="small"
                      >删除行
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-button type="text" @click="addRows()">增加行</el-button>
            </div> -->
            <el-form
              :model="form"
              :rules="ncidPositiveRules"
              ref="ncidPositiveForm"
            >
              <Table :tableData="forms.relativePersonNcidPositiveData">
                <el-table-column label="姓名" prop="xm" min-width="180">
                  <template v-slot="scope">
                    <el-form-item
                      :prop="
                        'relativePersonNcidPositiveData.' + scope.$index + '.xm'
                      "
                      :rules="ncidPositiveRules.xm"
                    >
                      <el-input
                        v-model="scope.row.xm"
                        maxlength="100"
                        clearable
                        placeholder="请输入内容"
                      />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="证件类型" prop="zjlx" min-width="110">
                  <template v-slot="scope">
                    <el-form-item
                      :prop="
                        'relativePersonNcidPositiveData.' +
                        scope.$index +
                        '.zjlx'
                      "
                      :rules="ncidPositiveRules.zjlx"
                    >
                      <el-select v-model="scope.row.zjlx" placeholder="请选择">
                        <el-option
                          v-for="item in zjlxData"
                          :key="item.bm"
                          :label="item.qc"
                          :value="item.bm"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="证件号" prop="zjhm" min-width="200">
                  <template v-slot="scope">
                    <el-form-item
                      :prop="
                        'relativePersonNcidPositiveData.' +
                        scope.$index +
                        '.zjhm'
                      "
                    >
                      <el-input
                        v-model="scope.row.zjhm"
                        clearable
                        placeholder="请输入证件号码"
                      />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="确诊日期" prop="qzrq" min-width="180">
                  <template v-slot="scope">
                    <el-form-item>
                      <el-date-picker
                        v-model="scope.row.qzrq"
                        type="date"
                        style="width: 150px"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="出院日期" prop="cyrq" min-width="180">
                  <template v-slot="scope">
                    <el-form-item>
                      <el-date-picker
                        v-model="scope.row.cyrq"
                        type="date"
                        style="width: 150px"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="死亡日期" prop="swrq" min-width="180">
                  <template v-slot="scope">
                    <el-form-item>
                      <el-date-picker
                        v-model="scope.row.swrq"
                        type="date"
                        style="width: 150px"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" prop="operation" min-width="100">
                  <template v-slot="scope">
                    <el-form-item>
                      <div class="flex-in">
                        <div class="operation">
                          <span @click="remove(scope.$index, 5)"
                            ><i class="el-icon-delete"></i>
                            删除
                          </span>
                        </div>
                      </div>
                    </el-form-item>
                  </template>
                </el-table-column>
              </Table>
            </el-form>
            <!-- 添加 -->
            <div class="add">
              <span @click="add(5)">
                <i class="ez-icon-circle-plus-outline"></i>添加
              </span>
            </div>
          </div>
        </div>
      </div>
      <div v-show="active == 2">商品</div>
      <el-button @click="pre" v-if="active > 1">上一步</el-button>
      <el-button @click="next" v-if="active < 2">下一步</el-button>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1,

      forms: {
        relativePersonNcidPositiveData: [],
      },

      // ncidPositiveRules: {
      //   xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      //   zjlx: [
      //     {
      //       required: true,
      //       message: "请选择证件类型",
      //       trigger: "change",
      //     },
      //   ],
      //   zjhm: [
      //     {
      //       required: true,
      //       message: "请输入证件号码",
      //       trigger: "change",
      //     },
      //     { validator: zjhmRules, trigger: "change" },
      //   ],
      // },

      form: {
        name: "",
        region: "",
        num: "",
        month: "",
        fw: "",
        zh: "",
        status: "",
      },
      log: false,
      dialogFormVisible: false,
      forms: { day: "", num: "", name: "" },
      search: "",
      tableData: [
        {
          id: "1",
          img: "https://cdn.wwads.cn/creatives/4l7SjlqRugYGKG08JodTSf0izsZjfXckL5gpfxm3.jpg",
          qiye: "xxxgs",
          date: "2016002",
          name: "五金",
          mouth: "7",
          time: "2022-2-12",
          status: "已解决",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          img: "https://cdn.wwads.cn/creatives/4l7SjlqRugYGKG08JodTSf0izsZjfXckL5gpfxm3.jpg",
          qiye: "xxxgs",
          date: "2060504",
          name: "五金",
          mouth: "7",
          time: "2022-2-12",
          status: "异常",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "3",
          img: "https://cdn.wwads.cn/creatives/4l7SjlqRugYGKG08JodTSf0izsZjfXckL5gpfxm3.jpg",
          qiye: "xxxgs",
          date: "20160501",
          name: "五金",
          mouth: "7",
          time: "2022-2-12",
          status: "已解决",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "4",
          img: "https://cdn.wwads.cn/creatives/4l7SjlqRugYGKG08JodTSf0izsZjfXckL5gpfxm3.jpg",
          qiye: "xxxgs",
          date: "20160503",
          name: "五金",
          mouth: "7",
          time: "2022-2-12",
          status: "已解决",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      //
      columnPropIndex: 0, //列属性自增
      columnData: [{ name: "id" }], //列标题数组
      tableDatas: [
        {
          id: "1",
          img: "https://cdn.wwads.cn/creatives/4l7SjlqRugYGKG08JodTSf0izsZjfXckL5gpfxm3.jpg",
          qiye: "xxxgs",
          date: "2016002",
          name: "五金",
          mouth: "7",
          time: "2022-2-12",
          status: "已解决",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          img: "https://cdn.wwads.cn/creatives/4l7SjlqRugYGKG08JodTSf0izsZjfXckL5gpfxm3.jpg",
          qiye: "xxxgs",
          date: "2016002",
          name: "五金",
          mouth: "7",
          time: "2022-2-12",
          status: "已解决",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      zichandetail: [
        {
          name: "姓名",
          relationship: "关系",
          mobile: "+++",
          birthday: "1000-1-1",
          gongzuodanwei: "ly",
        },
      ],
      shopform: {
        name: "",
        num: "",
        time: "",
        fw: "",
        zq: "",
      },
    };
  },
  mounted() {},
  methods: {
    remove(index, num) {
      this.form.relativePersonNcidPositiveData.splice(index, 1);
    },
    add(num) {
      let ncidPositiveForm = {
        xm: "",
        zjlx: "",
        zjhm: "",
        qzrq: "",
        cyrq: "",
        swrq: "",
      };
      if (this.form.relativePersonNcidPositiveData == undefined) {
        this.form.relativePersonNcidPositiveData = new Array();
      }
      this.form.relativePersonNcidPositiveData.push(ncidPositiveForm);
    },
    deleteColumns(property) {
      const _this = this;
      // 你想删除属性:property
      _this.tableDatas.forEach(function (item, index) {
        //遍历数组中的每个对象 删除指定的属性
        _this.$delete(item, property);
      });
      // 2、删除表头数组里的数据
      _this.columnDatas.forEach(function (item, index) {
        if (item.prop === property) {
          _this.columnData.splice(index, 1);
        }
      });
    },

    addRows() {
      const circle = this.tableDatas[0]; //取出数组中第一个对象
      if (circle) {
        const newObj = {};
        for (let key in circle) {
          //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = "";
        }
        this.tableDatas.splice(this.tableDatas.length - 1, 0, newObj);
      }
    },

    delmembers(index, row) {
      var that = this;
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确定的操作(调用接口)
          var hasmembers = that.zichandetail.members;
          for (var i = 0; i < hasmembers.length; i++) {
            if (row.id == hasmembers[i].id) {
              that.zichandetail.splice(i, 1);
              // this.$message({ message: '删除成功', duration: 2000, type: 'success' });
            }
          }
        })
        .catch(() => {
          //点取消的提示
          return;
        });
    },

    addmembers() {
      console.log("与承租户同户籍成员");
      var member = this.zichandetail;
      console.log(member);
      var length = member.length;
      this.zichandetail.push({
        id: parseInt(length),
        name: "",
        relationship: "",
        mobile: "",
        birthday: "",
        gongzuodanwei: "",
      });
    },
    //  ***********************************
    pre() {
      if (this.active-- < 2) this.active = 1;
    },
    next() {
      console.log(this.active);
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.shopinfo {
  display: flex;
  height: 100%;
  .shopinfo-left {
    width: 40%;
  }
  .shopinfo-con {
    width: 55%;
  }
}
//
.green {
  color: #22c55e;
}
.red {
  color: red;
}
tr {
  height: 30px;
  line-height: 40px;
}
.trr {
  color: gray;
  font-size: 16px;
}
.border-bottom {
  border-bottom: 1px dashed #edf2f7;
}
tr:hover {
  background-color: #f5f7fa;
}
.box-con {
  display: flex;
  margin-left: 60px;
}
.box-con img {
  padding: 14px;
  width: 50px;
  height: 50px;
}
.right {
  margin-left: 2px;
}
table {
  width: 100%;
  text-align: center;
  margin: auto;
}
.status {
  width: 70px;
  border-radius: 4px;
  border-bottom: 1px dashed #edf2f7;
}
.btns {
  width: 96px;
  height: 38px;
  line-height: 10px;
  border-radius: 4px;
  margin: auto;
  opacity: 1;
  color: #1a202c;
}
.table-con {
  width: 100%;
  margin-top: 50px;
}
.main-con {
  padding: 10px 10px;
}
.form-inline {
  display: flex;
  margin-left: 30px;
}
.form-group {
  margin-left: 20px;
}
.sr-only {
  margin-right: 15px;
}
.form-inline {
  width: 100%;
}
.dialog-form {
  display: flex;
  justify-content: center;
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
  }
}
.dialog-con .el-form-item__label {
  color: #718096;
}
.dialog-footer {
  display: flex;
  width: 100%;
  button:nth-child(1) {
    background: #194bfb;
  }
  .button {
    flex: 1;
    width: 50%;
  }
}
.dialog-form {
  width: 100vw;
  height: 100%;
}
</style>
